<template>
  <div class="main-container">
    <div style="margin:10px 0 0 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>人力资源管理</el-breadcrumb-item>
        <el-breadcrumb-item>请销假</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    </div>

    <div>
      <el-form inline>
        <el-form-item label="姓名" label-width="50px">
          <el-input class="w200" v-model="formData.p1"></el-input>
        </el-form-item>
        <el-form-item label="起始日期" label-width="80px">
          <el-date-picker class="w200" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" label-width="80px">
          <el-date-picker class="w200" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="共" label-width="30px"> <el-input class="w50" v-model="formData.p1"></el-input> 天 </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item label="类型" label-width="50px">
          <el-select class="w200" v-model="formData.p2">
            <el-option value="事假" label="事假"></el-option>
            <el-option value="病假" label="病假"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事由" label-width="60px">
          <el-input class="w500" v-model="formData.p1"></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态" label-width="80px">
          <el-select class="w225" v-model="formData.p3">
            <el-option value="休假中" label="休假中"></el-option>
            <el-option value="已销假" label="已销假"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="操作：" label-width="80px">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button type="primary" @click="submitForm">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table :data="dataList" border stripe>
        <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="f1" label="姓名" width="100" align="center"></el-table-column>
        <el-table-column prop="f2" label="类型" width="80" align="center"></el-table-column>
        <el-table-column prop="f3" label="请假天数" width="80" align="center"></el-table-column>
        <el-table-column prop="f4" label="起始日期" width="120" align="center" sortable></el-table-column>
        <el-table-column prop="f5" label="结束日期" width="120" align="center" sortable></el-table-column>
        <el-table-column prop="f6" label="销假日期" width="120" align="center" sortable></el-table-column>
        <el-table-column prop="f7" label="状态" width="100" align="center"></el-table-column>
        <el-table-column prop="f8" label="请假事由" min-width="150" align="center"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template>
            <el-button size="mini" type="primary">审批</el-button>
            <el-button size="mini" type="primary">销假</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class EquipmentList extends Vue {
  formData: any = {
    p1: '',
    p2: '',
    p3: ''
  }
  submitForm() {}
  dataList: any[] = [
    { id: 1, f1: '曲晓', f2: '事假', f3: 3, f4: '2024-05-10', f5: '2024-05-12', f6: '2024-05-13', f7: '已销假', f8: '家里有急事' },
    { id: 2, f1: '李兵', f2: '病假', f3: 5, f4: '2024-06-15', f5: '2024-06-19', f6: null, f7: '未销假', f8: '感冒发烧，医生建议休息' },
    { id: 3, f1: '李海霞', f2: '事假', f3: 2, f4: '2024-07-05', f5: '2024-07-06', f6: null, f7: '休假中', f8: '' },
    { id: 4, f1: '高伟', f2: '病假', f3: 6, f4: '2024-08-10', f5: '2024-08-15', f6: null, f7: '未销假', f8: '腰椎间盘突出复发' },
    { id: 5, f1: '孙孝利', f2: '事假', f3: 4, f4: '2024-09-12', f5: '2024-09-15', f6: '2024-09-16', f7: '已销假', f8: '' },
    { id: 6, f1: '郭传纬', f2: '病假', f3: 5, f4: '2024-10-08', f5: '2024-10-12', f6: null, f7: '未销假', f8: '体检后医生建议休息' },
    { id: 7, f1: '王刚', f2: '事假', f3: 3, f4: '2024-11-05', f5: '2024-11-07', f6: null, f7: '休假中', f8: '' },
    { id: 8, f1: '李彩雁', f2: '病假', f3: 4, f4: '2024-12-10', f5: '2024-12-13', f6: null, f7: '未销假', f8: '肠胃炎住院治疗' },
    { id: 9, f1: '王晓丹', f2: '事假', f3: 5, f4: '2024-12-22', f5: '2024-12-26', f6: null, f7: '休假中', f8: '家中有急事' },
    { id: 10, f1: '吴士宝', f2: '病假', f3: 3, f4: '2024-07-18', f5: '2024-07-20', f6: null, f7: '未销假', f8: '' },
    { id: 11, f1: '赵振春', f2: '事假', f3: 4, f4: '2024-06-05', f5: '2024-06-08', f6: null, f7: '休假中', f8: '处理家庭事务' },
    { id: 12, f1: '周宏峰', f2: '病假', f3: 3, f4: '2024-05-20', f5: '2024-05-22', f6: '2024-05-23', f7: '已销假', f8: '流感' },
    { id: 13, f1: '肖树伟', f2: '病假', f3: 2, f4: '2024-11-15', f5: '2024-11-16', f6: null, f7: '未销假', f8: '轻微胃病' },
    { id: 14, f1: '李红铃', f2: '事假', f3: 5, f4: '2024-08-22', f5: '2024-08-26', f6: '2024-08-27', f7: '已销假', f8: '家人婚礼' },
    { id: 15, f1: '张君', f2: '病假', f3: 3, f4: '2024-09-05', f5: '2024-09-07', f6: null, f7: '未销假', f8: '感冒加重' }
  ]
}
</script>

<style lang="scss" scoped></style>
